<template>
  <!-- 选择组织机构 -->
  <el-dialog v-model="dialogTableVisible" title="组织机构">
    <div style="margin-bottom: 10px">
      <el-form
        class="-mb-15px"
        :model="params"
        ref="queryFormRef"
        :inline="true"
        label-width="auto"
      >
        <el-form-item label="机构名称:" prop="name">
          <el-input
            v-model="params.name"
            placeholder="请输入"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon icon="ep:search" class="mr-5px" /> 搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon icon="ep:refresh" class="mr-5px" /> 重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      row-key="id"
      :data="dialogTableData"
      :border="true"
      :stripe="true"
      :default-expand-all="true"
      :show-overflow-tooltip="true"
      :highlight-current-row="true"
      max-height="400px"
      @row-click="tableRowClick"
      @row-dblclick="tableRowClick"
      :tree-props="treeProps"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="机构全称" align="center" />
      <el-table-column prop="projectName" label="机构简称" align="center" />
      <el-table-column prop="type" label="级别" align="center">
        <template #default="scope">
          <el-tag type="primary" v-if="scope.row.type == 1">部门</el-tag>
          <el-tag type="primary" v-if="scope.row.type == 2">项目</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button size="small" @click="cancel">取 消</el-button>
      <el-button size="small" type="primary" @click="confirm">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { handleTree } from '@/utils/tree'
import * as DeptApi from '@/api/system/dept'

defineOptions({ name: 'SelectDept' })
const emit = defineEmits(['confirm'])

// 搜索表单 Ref
const queryFormRef = ref()

// 弹窗是否展示
const dialogTableVisible = ref(false)

const treeProps = reactive({
  checkStrictly: true
})

// 表格数据
const dialogTableData = ref([])

// 表格查询参数
const params = ref({
  name: '',
  type: undefined
})

// 获取表格列表数据
const getDialogTableList = async () => {
  // 加载部门树
  dialogTableData.value = handleTree(await DeptApi.getSimpleDeptListByType(params))
}

// 搜索按钮操作
const handleQuery = () => {
  getDialogTableList()
}

// 重置按钮操作
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

// 表格行数据
const tableRow = ref(null)
// 表格行点击事件
const tableRowClick = (row) => {
  tableRow.value = row
}

// 取消事件
const cancel = () => {
  dialogTableVisible.value = false
}

// 确定事件
const confirm = () => {
  emit('confirm', tableRow.value)
  dialogTableVisible.value = false
}

// 打开弹窗
const open = async () => {
  getDialogTableList()
  tableRow.value = null
  dialogTableVisible.value = true
}

// 提供 open 方法，用于打开弹窗
defineExpose({ open })
</script>

<style lang="scss" scoped></style>
